<template>
  <v-layout type="main">
    <div class="alike-lis-header">
      <div class="lis-header-left">
        <div class="add-btn" @click="$router.push({ path: '/dag/detail' })">
          + 新增
        </div>

        <div class="search-box">
          <el-input
            prefix-icon="el-icon-search"
            v-model="Pagedata.name"
            class="search"
            placeholder=""
            @input="searchChange"
          />
        </div>
      </div>
    </div>

    <div class="table-data">
      <el-table :data="tableData" style="margin-top: 50px; width: 100%">
        <el-table-column prop="name" label="名称">
          <template slot-scope="scope" class="name-load-box">
            <span
              class="show-loadding"
              v-show="
                scope.row.status != 'terminated' &&
                scope.row.status != 'running'
              "
            >
              <i class="el-icon-loading"></i>
            </span>
            <el-popover placement="right-start" width="260" trigger="hover">
              <div class="breviary clearfix" v-if="scope.row.dataset">
                <p class="breviary-title">数据集</p>
                <p class="breviary-detail">
                  {{ scope.row.dataset && scope.row.dataset.name }}
                </p>
              </div>
              <div class="breviary clearfix">
                <p class="breviary-title">基础环境</p>
                <p class="breviary-detail">
                  {{ scope.row.image && scope.row.image.name }}<br />
                  <span class="sml-font"
                    >版本：{{
                      scope.row.image && scope.row.image.version
                    }}</span
                  >
                </p>
              </div>
              <div class="breviary clearfix" v-if="scope.row.updateUser">
                <p class="breviary-title">更新人</p>
                <p class="breviary-detail">
                  {{
                    (scope.row.updateUser && scope.row.updateUser.nickName) ||
                    (scope.row.updateUse && scope.row.updateUser.username)
                  }}
                </p>
              </div>
              <span slot="reference">
                <el-button @click="look(scope.row)" type="text" size="small">
                  {{ scope.row.name }}
                </el-button>
              </span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tooltip
              v-if="scope.row.errorMsg"
              class="item"
              effect="dark"
              :content="scope.row.errorMsg"
              placement="top-start"
            >
              <span :class="['statues', scope.row.status]">
                {{ statusMap[scope.row.status] }}
              </span>
            </el-tooltip>
            <span :class="['statues', scope.row.status]" v-else>
              {{ statusMap[scope.row.status] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="资源组">
          <template slot-scope="{ row }">
            <p v-if="row.products && row.products.length == 1">
              {{ row.products[0].product }}
              {{ (row.products[0].price * 6000) / 100 }}元/小时
            </p>
            <div v-if="row.products && row.products.length > 1">
              {{ row.products.length }}组配置
              <el-popover placement="bottom-end" trigger="hover">
                <p>主节点</p>
                <p>
                  {{ row.productName }}
                  {{
                    row.products &&
                    row.products[0] &&
                    row.products[0].price &&
                    (row.products[0].price * 6000) / 100
                  }}元/小时
                </p>
                <p
                  v-if="row.slaveList && row.slaveList.length"
                  class="popover-child-title"
                >
                  子节点
                </p>
                <div
                  v-for="(e, i) in row.slaveList"
                  :key="i"
                  class="slave-list"
                >
                  <strong>资源：</strong>{{ e.productName }}
                  {{ (e.price * 6000) / 100 }}元/小时<span
                    class="sitting"
                  ></span>
                  <strong>数量：</strong>{{ e.podNum }}
                </div>
                <i class="el-icon-warning" slot="reference"></i>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="updateUser" label="更新时间">
          <template slot-scope="scope">
            {{ formatTime(scope.row.updateTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="duration" label="运行时长(分钟)" />
        <!-- <el-table-column
          prop="updateUser"
          align="center"
          minWidth="180px"
          label="更新时间">
            <p slot="header" slot-scope="scope">{{ scope.column }}</p>
          <template slot-scope="scope">
            {{ formatTime(scope.row.updateTime) }}
            duration
          </template>
        </el-table-column> -->

        <el-table-column width="240" label="操作">
          <template slot-scope="scope">
            <div class="table-options">
              <el-button
                @click="look(scope.row)"
                type="text"
                :disabled="!(scope.row.status == 'running')"
                size="small"
              >
                打开
              </el-button>
              <span class="line"> | </span>
              <!-- <el-popconfirm
                title="您确定要停止吗？"
                @onConfirm="stop(scope.row.id)"
                v-if="
                  scope.row.status === 'running' ||
                  scope.row.status === 'failed' ||
                  scope.row.status === 'creating' ||
                  scope.row.status === 'queuing' ||
                  scope.row.status === 'deploying'
                "
              >
                <el-button type="text" size="small" slot="reference">
                  停止
                </el-button>
              </el-popconfirm> -->

              <el-popover
                placement="top"
                width="80"
                trigger="click"
                v-model="scope.row.visible"
              >
                <p>您确定要停止吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="scope.row.visible = false"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="stop(scope.row.id)"
                    >确定</el-button
                  >
                </div>
                <el-button
                  v-if="
                    scope.row.status === 'running' ||
                    scope.row.status === 'failed' ||
                    scope.row.status === 'creating' ||
                    scope.row.status === 'queuing' ||
                    scope.row.status === 'deploying'
                  "
                  type="text"
                  slot="reference"
                  >停止</el-button
                >
              </el-popover>

              <el-button
                type="text"
                @click="rewrite(scope.row)"
                :disabled="scope.row.status !== 'terminated'"
                size="small"
              >
                修改
              </el-button>
              <span class="line"> | </span>

              <el-button
                @click="start(scope.row.id)"
                type="text"
                size="small"
                :disabled="scope.row.status == 'terminating'"
                v-if="scope.row.status === 'terminated'"
              >
                启动
              </el-button>

              <el-popconfirm
                title="您确定要停止吗？"
                @onConfirm="del(scope.row.id)"
              >
                <el-button
                  type="text"
                  slot="reference"
                  :disabled="scope.row.status !== 'terminated'"
                  size="small"
                >
                  删除
                </el-button>
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <div class="no-data">
            <p class="no-data-title">没有数据</p>
          </div>
        </template>
      </el-table>
    </div>
    <div class="page-nb-pagination" v-if="Pagedata.total > 10">
      <el-pagination
        layout="prev, pager, next, jumper"
        class="pagination"
        :page-size="Pagedata.pageSize"
        :current-page.sync="Pagedata.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="Pagedata.total"
      >
      </el-pagination>
    </div>
  </v-layout>
</template>

<script>
import { mapActions, mapState } from "vuex";
import { getCanvas, delCanvas, startCanvas, stopCanvas } from "@/api/dag";
// import SaveTask from "../module/save-task-canvas"
// import copyTask from '../module/copyTask.vue'
// import saveImageDialog from './modules/saveImageDialog'
// import saveTaskDialog from './modules/saveTaskDialog'

import { formatTime, isStringifyJSON } from "@/utils/tool";
import { bus } from "@/main";
import { statusMap } from "@/utils/maps";
import { domain } from "@/config";

export default {
  data() {
    return {
      domain,
      search: this.$route.query.childSearch || "",
      // showTypeDialog: false,//  whether to show webide the dialog
      isShowDialog: false,
      isSaveReady: false,
      isDisabled: true,
      isWebide: 3,
      tempData: {},
      tableData: [],
      total: 0,
      page: 1,
      rewData: {},
      canvas_id: "",
      projectId: "",
      isImageShow: false,
      isTaskShow: false,
      statusMap,
      showChart: false,
      projectBox: {},
      popProjectId: this.$route.query.id,
      isNew: "",
      drawer: false,
      drawerId: "",
      drawerMap: [],
      nodeName: "",
      dagMsg: null,
      Pagedata: {
        pageNum: 1,
        pageSize: 12,
        total: 0,
        name: "", // 名称搜索
      },
    };
  },
  props: ["msg"],
  watch: {
    tempData(val) {
      console.log(val.length);
      if (val.length) {
        this.isDisabled = false;
      } else {
        this.isDisabled = true;
      }
    },
    msg: {
      handler(val) {
        console.log("进来了", val);
        this.getData();
      },
    },
  },
  components: {
    // SaveTask,
    // copyTask,
    // saveImageDialog,
    // saveTaskDialog,
  },
  computed: mapState({
    pageNum: (state) => state.menuStore.pageData.pageNum,
    searchValue: (state) => state.menuStore.searchValue,
  }),
  methods: {
    ...mapActions(["updatePageNum", "updateSearch"]),
    isShow(data) {
      this.isShowDialog = data.isShow;
      if (data.confirm == "confirm") {
        this.getData();
      }
    },
    exportModle(canvas_id) {
      this.canvas_id = canvas_id;
      this.isShowDialog = true;
    },
    toJk(canvas_id) {
      this.$router.push({
        path: "/platform/notebook/chart",
        query: {
          nid: canvas_id,
          id: this.$route.query.id,
          childSearch: this.search,
        },
      });
    },
    formatTime(str) {
      return formatTime(str, "YYYY-MM-DD HH:mm:ss");
    },
    show(data) {
      this.showChart = data;
      bus.$emit("toHideIntro", false);
    },
    async getData() {
      let res = await getCanvas({ ...this.Pagedata });
      console.log(res);
      this.tableData = res.data.list;

      this.total = res.data.total;
      // this.tableData.forEach((e) => {
      //   // this.tableData[i].updateTime = formatTime(e.updateTime)
      //   console.log(e.updateTime)
      // })
      // let asd = await detailProject({id: this.$route.query.id})
      // console.log(asd)
    },
    searchChange() {
      this.updatePageNum(1);
      this.Pagedata.pageNum = 1;
      this.updateSearch(this.Pagedata.name);
      this.getData();
    },
    handleSizeChange(val) {
      console.log(val);
    },
    handleCurrentChange(val) {
      console.log(val);
      this.Pagedata.pageNum = val;
      this.updatePageNum(val);
      this.getData();
    },
    async stop(id) {
      await stopCanvas({ id });
      this.getData();
    },
    async start(id) {
      await startCanvas({ id });
      console.log("start");
      this.getData();
    },
    async del(id) {
      let res = await this.$isDel("任务文件被物理删除且不可恢复，请谨慎操作。");
      if (res) {
        await delCanvas({ id });
        this.$message.success("删除成功");
        this.getData();
      }
    },
    saveImage(data) {
      this.canvas_id = data.id;
      this.isImageShow = true;
    },
    saveTask(data) {
      this.canvas_id = data.id;
      this.isTaskShow = true;
    },
    rewrite(data) {
      this.$router.push({
        path: "/dag/detail",
        query: {
          ...this.$route.query,
          canvas_id: data.id,
          childSearch: this.search,
        },
      });
    },
    look(data) {
      this.$router.push({
        path: "/dag/edit",
        query: {
          ...this.$route.query,
          canvas_id: data.id,
          childSearch: this.search,
        },
      });
    },
    queryByName() {
      this.page = 1;
      this.getData();
    },
    addBeforeHandler() {
      this.$router.push({
        path: "/dag/detail",
        query: {
          id: this.$route.query.id,
          search: this.$route.query.search,
          isWebide: this.isWebide,
          childSearch: this.search,
        },
      });
    },
    msgFn(e) {
      if (isStringifyJSON(e.data)) {
        let msg = JSON.parse(e.data);
        console.log(msg);
        if (msg.type == "canvas") {
          this.getData();
        }
      }
    },
  },
  created() {
    this.Pagedata = {
      ...this.Pagedata,
      pageNum: this.pageNum,
      name: this.searchValue,
    };
  },
  async mounted() {
    this.getData();
    bus.$on("canvas", (e) => {
      console.log("notebook消息--->", e);
      this.getData();
    });
    bus.$on("canvasinfo", (e) => {
      console.log("notebookInfo消息--->", e);
      this.getData();
    });
    let res = await this.$myInfo(this);
    if (res && res.id) {
      this.dagMsg = new this.$ws({ url: `canvas/ws/imserver/${res.id}` });
      this.dagMsg.initWebSocket(this.msgFn);
    }
  },
  destroyed() {
    bus.$off("canvas");
    bus.$off("canvasinfo");
    this.dagMsg.disconnect();
  },
};
</script>

<style lang="less" scoped>
.layout {
  width: 99%;
  overflow: hidden;
}

.hint {
  margin: 0 16px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #fed6a7;
  padding: 0 38px;
  line-height: 40px;
  background: url(~@/assets/img/hint-icon.png) no-repeat 14px center #fef4e8;
  background-size: 16px 16px;
  color: #666;
}

.show-loadding {
  float: left;
}

.table-head {
  padding: 8px 16px 0;

  .btn {
    float: left;
  }

  .search {
    float: right;
    width: 254px;
  }
}

.no-data {
  padding: 150px 0;

  .no-data-title {
    line-height: 60px;
    text-align: center;
  }

  .btn {
    margin-top: 40px;
    margin-left: 0;
  }
}

.copy-btn {
  display: inline-block;
}

.statues {
  padding-left: 14px;
}

.el-icon-warning {
  font-size: 16px;
  margin-left: 6px;
}

.popover-child-title {
  margin-top: 10px;
}

.slave-list {
  border-bottom: 1px solid #f1f1f1;
  line-height: 40px;
}

.sitting {
  margin-left: 20px;
}

.check-div {
  min-height: 100px;
  text-align: center;

  .h-b {
    height: 45px;
    padding-top: 20px;
    width: 200px;
  }

  .ck {
    color: #409eff;
    font-weight: 500;
  }
}

.btn-box {
  text-align: right;
  margin-top: 10px;
  margin-left: 20px;
}

.table-options {
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
}
</style>
